<template>
  <t-form class="searchForm" :data="params" @submit="emits('submit', params)" @reset="handleReset">
    <t-row :gutter="[20, 20]" style="width: 100%">
      <slot :params="params"></slot>
    </t-row>
    <t-space class="buttons" direction="vertical">
      <t-button type="submit">
        查询
        <template #icon>
          <t-icon name="search" />
        </template>
      </t-button>
      <t-button theme="default" type="reset">
        重置
        <template #icon>
          <t-icon name="refresh" />
        </template>
      </t-button>
    </t-space>
  </t-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps({
  defaultParams: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(['submit']);
const params = reactive<Record<string, any>>({
  createTime: [],
  ...props.defaultParams,
});
// 重置方法
const reset = () => {
  Object.keys(params).forEach((key) => {
    if (key === 'createTime') {
      params[key] = [];
    } else {
      params[key] = '';
    }
  });
  emits('submit', 'reset'); // 重置后触发查询
};
// 内部重置逻辑
const handleReset = () => {
  reset();
};
defineExpose({
  params,
  reset,
});
</script>

<style lang="less" scoped>
.searchForm {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--td-comp-margin-xxl);
}

.buttons {
  @w: 12px;

  margin-left: @w;
  padding-left: @w;
  border-left: 1px solid var(--td-border-level-1-color);
}
</style>
